<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        form{
            width:270px;
        }
        input{
            width: 64%;
            background: #eee;
        }
        input:focus{
            background: #fff;
        }
        form{
            padding: 0 12px 12px;
        }
        label{
            display: block;
            padding-bottom:12px;
        }
        .label-text{
            width: 36%;
            float: left;
        }
        #img-show{
            width: 135px;
            height: 135px;
            display: block;
            margin: 0 auto;
            object-fit: cover;
        }
    </style>
    <script>
        function imgfileChange() {
            var img_show = document.getElementById("img-show");
            var imgfile = document.getElementById("imgfile");

            var freader = new FileReader();
            freader.readAsDataURL(imgfile.files[0]);
            freader.onload = function (e) {
                img_show.src = e.target.result;
            };
        }
    </script>
</head>
<body>
	<div id="app">
		<div id="wrap">
		    <div id="header">
		        <div style="float: right;padding-top: 24px">2009/11/20</div>
		        <h1>旅游信息管理系统</h1>
		    </div>
		    <div id="header-bar"></div>
		    <div id="content" style="height: 480px">
		        <img src="../img/timg.jpg" style="float: right;height: 320px">
		        <h2>修改景点</h2>
		        <form action="viewspotlist.html" method="post">
		            <label>
		                <div class="label-text">景&emsp;&emsp;点：</div>
		                <input type="text" name="vname" v-model="place.name">
		            </label>
		            <label>
		                <div class="label-text">印象图片：</div>
		                <div style="text-align: center;padding-left: 36%">
		                    <img :src="src" alt="" id="img-show">
		                    <input type="file" id="imgfile" ref="myFile" style="display: none" onchange="imgfileChange()">
		                </div>
		            </label>
		            <label>
		                <div class="label-text">旺季时间：</div>
		                <input type="text" name="hottime" v-model="place.hottime">
		            </label>
		            <label>
		                <div class="label-text">旺季门票：</div>
		                <input type="text" name="hotprice" v-model="place.hotticket">
		            </label>
		            <label>
		                <div class="label-text">淡季门票：</div>
		                <input type="text" name="normalprice" v-model="place.dimticket">
		            </label>
					<label>
					    <div class="label-text">景点描述：</div>
					    <input type="text" name="normalprice" v-model="place.placedes">
					</label>
		            <label>
		                <div class="label-text">所属省份：</div>
		                <select v-model="place.provinceid">
		                    <option :value="province.id" v-for="province in provinces" v-text="province.name"></option>
		                </select>
		            </label>
		            <button type="button" @click="updatePlaceInfo">提 交</button>&emsp;
		            <a :href="'viewspotlist.html?id='+place.provinceid">返回</a>
		        </form>
		    </div>
		    <div id="footer">
		        ABC@126.com
		    </div>
		</div>
	</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            place:{},
			id:"",
			provinces:[],
			src:""
           
        },
        methods:{
         updatePlaceInfo(){
			 //修改景点的方法
			 let myFile = this.$refs.myFile;
			 let files = myFile.files;
			 let file = files[0];
			 let formdata = new FormData();
			 formdata.append("pic",file);
			 formdata.append("id",this.place.id);
			 formdata.append("name",this.place.name);
			 formdata.append("hottime",this.place.hottime);
			 formdata.append("hotticket",this.place.hotticket);
			 formdata.append("dimticket",this.place.dimticket);
			 formdata.append("provinceid",this.place.provinceid);
			 formdata.append("placedes",this.place.placedes);
			 axios({
			     method:'post',
			     url:'http://localhost:8989/place/update',
			     data: formdata,
			     headers:{
			         'Content-Type':'multipart/form-data'
			     }
			 }).then((res) =>{
			     console.log(res.data);
			     if (res.data.status){
			         alert(res.data.msg+",点击确定回到景点列表");
			         location.href='./viewspotlist.html?id='+this.place.provinceid
			     }else{
			         alert(res.data.msg);
			     }
			 })
		 },
		 findOne(id){
			  _this = this;
			   axios.get("http://localhost:8989/place/findOne?id="+id).then((res) =>{
				   console.log("1",res.data)
				   _this.place = res.data
				   _this.src = "data:image/png;base64,"+_this.place.picpath;
					
			 })
		 },
		  findAllProvinces(){
		     _this = this;
		     axios.get("http://localhost:8989/province/findByPage?rows=35").then((res) => {
		         _this.provinces = res.data.province;
		     })
		 },

        },
        created(){
           let id = location.href.substring(location.href.indexOf("=")+1);
           this.id = id;
           this.findOne(this.id);
		   //查询所有省份信息
		   this.findAllProvinces();

        }
    })
</script>